<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">列表</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <!-- 查询菜单 -->
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">工单号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.workOrderNo" :readonly="listDataLoadingState"
                @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">仓库</div>
          <div class="col-8">
            <simple-filter-select :options="$d.whDropdownList" :readonly="listDataLoadingState" :use-filter="false"
                option-label="whName" option-value="whId" v-model="fpsReq.whId" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">供应商</div>
          <div class="col-8">
            <simple-filter-select :options="$d.vendorDropdownList" option-label="abbrName" option-value="mfId"
                v-model="fpsReq.supplier" :auto-select-single-option="false" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">料号</div>
          <div class="col-8">
            <wm-sku-selector :sku="fpsReq.sku" @sku-selected="onSkuSelected"
                v-model="fpsReq.skuId" :readonly="listDataLoadingState"></wm-sku-selector>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">合同号</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.contractNo" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">Batch</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.batch" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">Mfg</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.mfg" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">PDS</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.pds" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">Label ID</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.labelId" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">版本时间戳</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.newVersion" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">移库单ID</div>
          <div class="col-8">
          <easy-input v-model="fpsReq.moveId" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">状态</div>
          <div class="col-8">
            <simple-filter-select :options="$d.stateDropdownList" :readonly="listDataLoadingState" :use-filter="false"
                v-model="fpsReq.state" />
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn :disable="listDataLoadingState" @click="loadListData(2)" color="primary" icon="search" label="查询" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table @request="fpsAssist.onDataTableRequest" :rows="$d.tableData" :columns="fpsInfo.columnsInfo"
          separator="cell" row-key="workOrderId" v-model:pagination="fpsInfo.paginationInfo" v-model:selected="$d.selectedItems"
          :visible-columns="fpsInfo.visibleColumns" dense flat :hide-pagination="true" :loading="listDataLoadingState"
          color="primary" binary-state-sort @row-dblclick="(evt,row)=>{fpsNav.gotoDetail(row.workOrderId)}" selection="multiple">
        <template v-slot:top="props">
          <!--功能按钮-->
          <div class="q-gutter-sm">
            <q-btn :disable="$d.selectedItems.length === 0" @click="deleteInvMoves" color="primary"
                label="生成移库单" v-if="fx.hasModifyRight('Wms.Inv.Inventory.GenerateMoveByWorkOrder')" />
          </div>

          <!--填充所有剩余空间-->
          <q-space />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
              v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
              @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
              :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <span class="full-width text-center"> <q-icon name="error_outline" /> 无数据 </span>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn class="btn-in-row" color="primary" dense label="查看"
                @click="evt=> fpsNav.gotoDetail(props.row.workOrderId, evt)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
              :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
              @go-to-page="fpsNav.gotoPage" />
        </template>
        <!--状态列插槽-->
        <template v-slot:body-cell-state="props">
          <q-td :props="props" auto-width>
            <q-badge :color="fx.fmt.labelWorkOrderStateColor(props.row.state)"
                :label="fx.fmt.labelWorkOrderState(props.row.state)" />
          </q-td>
        </template>
        <template v-if="fx.hasRight('Wms.Work.Asn.View')" v-slot:body-cell-moveId="props">
          <q-td :props="props">
            <a @click="toMoveDetail(props.row.moveId)" href="javascript:void(0)">{{ props.row.moveId }}</a>
          </q-td>
        </template>
      </q-table>
    </div>
  </q-page>


</template>
<script lang="ts">
export default {
  name: 'WorkOrderListStd'
}
</script>
<script lang="ts" setup>
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {reactive, ref} from 'vue'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {WmWhLite} from '@njt/wms/defs/basic/wh.d'
import _ from 'lodash'
import {
  GetLabelWorkOrderMasterListReq,
  GetLabelWorkOrderMasterListResp,
  MhlbcLabelWorkOrderMaster
} from 'src/defs/labelManagement'
import {WmSkuLite} from '@njt/wms/defs/basic/sku'
// 是否处于数据列表加载的状态
let listDataLoadingState = ref(false)
const pageTitle = '贴标工单'
useTitleHelper(pageTitle)
$f.fmt.prepartMoveDocTypeFmt()
// 列参数
const columnsDefine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: '贴标工单ID',
    name: 'workOrderId',
    field: 'workOrderId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: '工单号',
    name: 'workOrderNo',
    field: 'workOrderNo',
    align: 'left',
    defOrder: 3,
    sortable: true,
    defVisible: true
  },
  {
    label: '仓库ID',
    name: 'whId',
    field: 'whId',
    align: 'left',
    defOrder: 4,
    defVisible: false
  },
  {
    label: '仓库名称',
    name: 'whName',
    field: 'whName',
    align: 'left',
    defOrder: 5,
    sortable: true,
    defVisible: true
  },
  {
    label: '托盘号',
    name: 'palletNo',
    field: 'palletNo',
    align: 'left',
    defOrder: 6,
    sortable: true,
    defVisible: true
  },
  {
    label: '供应商',
    name: 'supplier',
    field: 'supplier',
    align: 'left',
    defOrder: 7,
    sortable: true,
    defVisible: true
  },
  {
    label: '料号ID',
    name: 'skuId',
    field: 'skuId',
    align: 'left',
    defOrder: 8,
    defVisible: false
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 9,
    sortable: true,
    defVisible: true
  },
  {
    label: '品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 10,
    defVisible: true
  },
  {
    label: '移库单ID',
    name: 'moveId',
    field: 'moveId',
    align: 'left',
    defOrder: 11,
    sortable: true,
    defVisible: true
  },
  {
    label: '贴标工单状态',
    name: 'state',
    field: 'state',
    align: 'left',
    defOrder: 12,
    sortable: true,
    defVisible: true
  },
  {
    label: '计划移库时间',
    name: 'createMoveDt',
    field: 'createMoveDt',
    align: 'left',
    defOrder: 13,
    sortable: true,
    defVisible: true,
    format: (value: string) => $f.fmt.dtFmtFull(value)
  },
  {
    label: '完成移库时间',
    name: 'movedDt',
    field: 'movedDt',
    align: 'left',
    defOrder: 14,
    defVisible: true,
    format: (value: string) => $f.fmt.dtFmtFull(value)
  },
  {
    label: '上线时间',
    name: 'labelingBeginDt',
    field: 'labelingBeginDt',
    align: 'left',
    defOrder: 15,
    defVisible: true,
    format: (value: string) => $f.fmt.dtFmtFull(value)
  },
  {
    label: '下线时间',
    name: 'labelingEndDt',
    field: 'labelingEndDt',
    align: 'left',
    defOrder: 16,
    defVisible: true,
    format: (value: string) => $f.fmt.dtFmtFull(value)
  },
  {
    label: 'QA时间',
    name: 'maintainingCaseStateDt',
    field: 'maintainingCaseStateDt',
    align: 'left',
    defOrder: 17,
    defVisible: true,
    format: (value: string) => $f.fmt.dtFmtFull(value)
  },
  {
    label: '错误记录',
    name: 'errorRecord',
    field: 'errorRecord',
    align: 'left',
    defOrder: 18,
    defVisible: true
  },
  {
    label: '合同号',
    name: 'contractNo',
    field: 'contractNo',
    align: 'left',
    defOrder: 19,
    defVisible: true
  },
  {
    label: 'Batch',
    name: 'batch',
    field: 'batch',
    align: 'left',
    defOrder: 20,
    defVisible: true
  },
  {
    label: 'Mfg',
    name: 'mfg',
    field: 'mfg',
    align: 'left',
    defOrder: 21,
    defVisible: true
  },
  {
    label: 'PDS',
    name: 'pds',
    field: 'pds',
    align: 'left',
    defOrder: 22,
    defVisible: true
  },
  {
    label: '数量',
    name: 'qty',
    field: 'qty',
    align: 'left',
    defOrder: 23,
    defVisible: true
  },
  {
    label: 'Label ID',
    name: 'labelId',
    field: 'labelId',
    align: 'left',
    defOrder: 24,
    sortable: true,
    defVisible: true
  },
  {
    label: '工艺版本时间戳',
    name: 'newVersion',
    field: 'newVersion',
    align: 'left',
    defOrder: 25,
    sortable: true,
    defVisible: true
  },
  {
    label: 'MarketRegulatoryFlag',
    name: 'marketRegulatoryFlag',
    field: 'marketRegulatoryFlag',
    align: 'left',
    defOrder: 26,
    defVisible: true
  },
]

const $d = reactive({
  tableData: [] as MhlbcLabelWorkOrderMaster[],
  // 仓库下拉
  whDropdownList: [] as WmWhLite[],
  selectedItems: [] as string[],
  // 供应商
  vendorDropdownList: ['亚利', '苏州雅利', '园区', 'XXD'],
  stateDropdownList: [
    { label: '初始', value: '0' },
    { label: '计划移库', value: '1' },
    { label: '完成移库', value: '3' },
    { label: '已上线', value: '5' },
    { label: '已下线', value: '7' },
    { label: '已QA', value: '9' },
  ]
})
let fpsReq: GetLabelWorkOrderMasterListReq = reactive({
  state: null,
  workOrderNo: null,
  whId: null,
  palletNo: null,
  supplier: null,
  skuId: null,
  sku: null,
  contractNo: null,
  batch: null,
  mfg: null,
  pds: null,
  labelId: null,
  version: null,
  newVersion: null,
  marketRegulatoryFlag: null,
  moveId: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios.get<GetLabelWorkOrderMasterListResp>('/project/mhlbc/inv/inventory/get-label-work-order-master-list', {params: fpsReq})
      .then((result) => {
        $d.selectedItems = []
        fpsAssist.handleGenericFpsResp(result.data)
        $d.tableData = result.data.mhlbcLabelWorkOrderMasters
        fpsAssist.saveFpsReq(fpsReq)
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        listDataLoadingState.value = false
      })
}
const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('wms/sku/work-order/',
    '/wms/sku/work-order/detail',
    '/wms/sku/work-order/create',
    '/wms/sku/work-order/edit',
    fpsReq, columnsDefine,
    null,
    loadListData)

// 生成移库单
const deleteInvMoves = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要生成移库单吗?',
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
          .post('/project/mhlbc/inv/inventory/generate-move-by-work-orders', _.map($d.selectedItems, 'workOrderId'))
          .then(() => {
            $f.ui.closeMsgBox()
            $d.selectedItems = []
            loadListData(2)
          })
          .catch((err) => {
            void $f.ui.messageBox({
              caption: '生成移库单失败',
              text: $f.getAxiosErrMsg(err),
              icon: $f.getAxiosErrIcon(err),
              buttons: 'Close'
            })
          })
    }
  })
}

// 料号选择器返回
const onSkuSelected = function (skuInfo: WmSkuLite) {
  fpsReq.sku = skuInfo?.sku ?? null
  fpsReq.skuId = skuInfo?.skuId ?? null
}

const toMoveDetail = function (id: number) {
  let urlPath = $f.router.resolve({name: '/wms/sku/mhl-wms-move/detail', params: {itemId: id}})
  window.open(urlPath.href, '_blank')
}

// 仓库下拉
void $f.lst.getWmWhSimpleList()
    .then((resp) => {
      $d.whDropdownList = resp
    })
const fx = $f
</script>
